<script setup lang="ts">
import {
  AliwangwangOutlined,
  CopyOutlined,
  LinkOutlined,
} from '@ant-design/icons-vue';

import { errimage } from '#/base';
import { copyToClipboard, gotoAliiwanwan } from '#/utils';

defineProps<{
  itemData?: any;
}>();

function gouto1688url(id: string) {
  id && open(encodeURI(`https://detail.1688.com/offer/${id}.html`));
}
</script>

<template>
  <div>
    <a-space align="start">
      <a-image
        :fallback="errimage"
        :src="itemData.mainPic"
        :width="60"
        style="border-radius: 8px"
      />
      <a-space :size="0" direction="vertical">
        <a-space>
          <a-tooltip :title="itemData.goodsName">
            <div
              class="w-64 cursor-pointer truncate"
              @click="() => gouto1688url(itemData.offerId)"
            >
              {{ itemData.goodsName }}
            </div>
          </a-tooltip>
          <a-button
            shape="round"
            size="small"
            type="link"
            @click="
              () => {
                copyToClipboard(itemData.goodsName);
              }
            "
          >
            <template #icon>
              <CopyOutlined class="text-xs" />
            </template>
          </a-button>
        </a-space>

        <a-space>
          <div class="text-xs text-gray-500">
            供货商: {{ itemData.wangwangAccount }}
          </div>
          <a-button
            shape="round"
            size="small"
            type="link"
            @click="
              () => {
                gotoAliiwanwan(itemData.wangwangAccount);
              }
            "
          >
            <template #icon>
              <AliwangwangOutlined />
            </template>
          </a-button>
        </a-space>
        <a-space class="text-xs text-gray-500">
          <div>价格: ¥{{ itemData.referencePrice }}</div>
          <is-miwen :list="itemData.supportChannelsList" />
          <div>
            <a-tooltip
              :title="`https://detail.1688.com/offer/${itemData.offerId}.html`"
            >
              <a
                :href="`https://detail.1688.com/offer/${itemData.offerId}.html`"
                target="_blank"
              >
                <LinkOutlined />货源链接
              </a>
            </a-tooltip>

            <a-button
              shape="round"
              size="small"
              type="link"
              @click="
                () => {
                  copyToClipboard(
                    `https://detail.1688.com/offer/${itemData.offerId}.html`,
                  );
                }
              "
            >
              <template #icon>
                <CopyOutlined class="text-xs" />
              </template>
            </a-button>
          </div>
        </a-space>
      </a-space>
    </a-space>
  </div>
</template>
